<template>
  <div id="app">
    <!-- <el-form :model="form" :rules="rules">
      <el-form-item prop="value">
        <el-input v-model="form.value"> </el-input>
      </el-form-item>
    </el-form> -->

    <!-- <NoticeBar :noticeList="noticeList" @click="getInfo" />
    <div class="office" v-if="status">
      <VueOffice @click="emit()" />
    </div>
    <button style="width: 90px" @click="status = !status">docx预览</button>
    <button style="width: 90px" @click="status = !status">excel预览</button>
    <Forms /> -->

    <!-- http://docs.google.com/gview? -->

    <!-- 微软的方法进行查看 -->
    <!-- <iframe
      :src="`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
        'http://static.shanhuxueyuan.com/test6.docx'
      )}`"
      width="100%"
      height="600px"
    ></iframe> -->
    <!-- <BatchImport :DOM="DOM" @import="getData" />
    <el-table ref="table" :data="tableData" style="width: 100%" id="mainTable">
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="province" label="省份" width="120">
      </el-table-column>
      <el-table-column prop="city" label="市区" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址" width="300">
      </el-table-column>
      <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
    </el-table> -->
    <Course />
    <!-- <Qrcode /> -->
  </div>
</template>
<script>
import NoticeBar from "./components/noticeBar";
import Forms from "./components/forms";
import VueOffice from "./components/vueOffice";
import BatchImport from "./components/batchImport";
import Qrcode from "./components/qrcode";
import Course from "./components/course";
export default {
  components: {
    NoticeBar,
    VueOffice,
    Forms,
    BatchImport,
    Qrcode,
    Course,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入金额"));
      } else {
        if (!isNaN(value)) {
          if (value < 0.1) {
            callback(new Error("最小金额0.1"));
          }
        } else {
          callback(new Error("请输入数字"));
        }
        callback();
      }
    };
    return {
      rules: {
        value: {
          validator: validatePass,
          trigger: "blur",
        },
      },
      DOM: {},
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      status: false,
      src: "",
      option: [],
      form: {},
      readonly: false,
      noticeList: [
        {
          content: "苹果也疯狂！iPhone XR来到小米价，刷新售价底线",
        },
        {
          content: "5号电池一出”，充电宝没用了，所有手机通用，行千里不关机",
        },
        {
          content: "6号电池一出”，充电宝没用了，所有手机通用，行千里不关机",
        },
        {
          content: "7号电池一出”，充电宝没用了，所有手机通用，行千里不关机",
        },
      ],
    };
  },
  mounted() {
    this.DOM = this.$refs.table;
  },
  methods: {
    getData(e) {
      this.tableData.push(...e);
      this.tableData = [...this.tableData];
    },
    getInfo(e) {
      console.log(e);
    },
    emit() {
      this.status = !this.status;
    },
    s(val) {
      this.option.push(JSON.parse(val));
      console.log(this.option);
    },
  },
};
</script>
<style scoped lang='less'>
.office {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
